<template>
	<view class="pd24_20">
		<view v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
			<view class="flex alcenter">
				<view class="member-face">
					<image class="face" :src="statics.defaultFace"></image>
				</view>
				<view class="ml15">
					<view class="ft16 cl-main">{{$t('user.no-login')}}</view>
					<view class="mt12 ft12 cl-notice">{{$t('user.no-login-desc')}}</view>
				</view>
			</view>
			<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>
		</view>
		<view v-else class="flex alcenter space">
			<view class="flex alcenter top-user">
				<view class="member-face" @click="opsets">
					<image class="face" :src="avatar"></image>
					<image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image>
				</view>
				<view class="ml15" @click="opsets">
					<view class="ft16 cl-main">{{ userinfo.nickname || '' }}</view>
					<view class="mt12 ft12 cl-notice"
						style="display: flex; align-items: center; justify-content: space-between;">
						ID:{{ userinfo.user_id || '' }}
						<view class="btn-mini opsetads" @click.stop="opset">
							<image mode="aspectFit" style="width: 36rpx; height: 36rpx;"
								:src="staticUrl + 'sz.png?v=1'">
						</view>
					</view>
				</view>
				<view class="member" @click.stop="jumpPage('/pages/client/wallet/member')">
					<image src="@/static/member.png"></image>
				</view>
			</view>
		</view>
		<view class="content money">
			<view class="line me" @click="jumpPage('/pages/client/wallet/gold')">
				<image src="@/static/wallet.png"></image>
				<view class="text">
					{{$t('user.wallet')}}
				</view>
			</view>
			<view class="line" v-for="(item, index) in wallet" :key="index" @click="jumpPage(item.path)">
				<view class="num">
					{{ item.value }}
				</view>
				<view class="text">
					{{item.text }}
				</view>
			</view>
		</view>
		<image v-if="singer_banner" class="red-packet" :src="singer_banner"></image>
		<view class="content">
			<siginIn style="width: 100%;" :sign_list="sign_list" :sign_rule="sign_rule" :qdjl="qdjl" :tdsy="tdsy"
				@cksigin="sigininFn"></siginIn>
		</view>
		<view class="content  task" v-if="taskList.length>0">
			<view class="title alpsoftjurnal">
				{{$t('task.title')}}
			</view>
			<view class="line" v-for="(item, index) in taskList" :key="index">
				<view class="left">
					<view class="top">
						<view class="title alpsoftjurnal">
							{{ item.title }}
						</view>
						<view class="num alpsoftjurnal">+{{ item.give_coin }}{{$t('user.gold2')}}</view>
					</view>
					<view class="desc alpsoftjurnal" v-if="item.value">
						<view class="progress-bar">
							<view class="border alpsoftjurnal" :style="{'width': item.status/item.value*100+'%'}"></view>
						</view>
						<span>{{item.status}}</span>/{{item.value}}
					</view>
					<view class="desc alpsoftjurnal" v-else>
						{{ item.desc }}
					</view>
				</view>
				<view class="button alpsoftjurnal" v-if="item.value" :class="item.value - item.status == 0?'hui':''">
					{{item.value-item.status==0?$t('task.button2'):$t('task.button1')}}
				</view>
				<span v-else>
					<button class="button alpsoftjurnal" open-type="share" v-if="index == 1" :class="item.status == 0?'':'hui'">
						{{ item.status == 0?$t('task.button1'):$t('task.button2')}}
					</button>
					<view class="button alpsoftjurnal" v-else :class="item.status == 0?'':'hui'" @click="jumpPage2(index)">
						{{ item.status == 0?$t('task.button1'):$t('task.button2')}}
					</view>
				</span>
			</view>
		</view>
		<view class="content bottom">
			<view class="line" v-for="(item, index) in bottomList" :key="index" @click="jumpPage(item.path)">
				<image :src="item.icon"></image>
				<view class="text alpsoftjurnal">
					{{item.text}}
				</view>
			</view>
		</view>
		<button class="button" open-type="contact alpsoftjurnal">{{$t('pages/client/member/service')}}</button>
	</view>
</template>

<script>
	import siginIn from '@/components/fanxiao-sign/sigin-in.vue';
	import util from '../../utils/util';
	export default {
		components: {
			siginIn
		},
		data() {
			return {
				isLogin: false,
				showLogin: false,
				isBirthday: true,
				showBirthday: false,
				showQrcode: false,
				avatar: '',
				userinfo: [],
				vipLevel: 0,
				iskq: 0,
				uid: 0,
				staticUrl: this.$config.staticUrl,
				singer_banner: '',
				wallet: [],
				sign_list: [],
				sign_rule: [],
				qdjl: 0,
				tdsy: 0,
				taskList: [],
				bottomList: []
			}
		},
		onLoad() {},
		onShow() {
			this.ongrzlTap();
			this.taskCompletionStatus()
			this.getUserCoinAmount()
			this.getList();
			this.cksigin()
			if (uni.getStorageSync("userinfo")) {
				this.uid = uni.getStorageSync("userinfo").id
			}
			this.setList()
			util.setTabbar()
			util.setNavTitle()
			this.$nextTick(() => {
				// this.jumpPage('/pages/set/language')
			})
		},
		onShareAppMessage: function(res) {
			// #ifdef MP-WEIXIN
			var href = '/pages/login/login?fxpid=' + this.uid
			console.log(href);
			let that = this;
			const obj = {
				title: "发送给好友",
				imageUrl: '',
				path: href
			}
			return obj
			// #endif
		},
		methods: {
			setList() {
				this.wallet = [{
					text: this.$t('user.gold1'),
					value: 0,
					path: ''
				}, {
					text: this.$t('user.gold2'),
					value: 0
				}, {
					text: this.$t('user.discount-coupon'),
					path: '/pages/client/wallet/discount-coupon',
					value: 0
				}, {
					text: this.$t('user.balance'),
					value: 0
				}]
				this.bottomList = [{
					text: this.$t('pages/client/tuan/zjjl'),
					icon: this.$config.staticUrl + 'zj.png',
					path: '/pages/client/tuan/zjjl'
				}, {
					text: this.$t('pages/client/tuan/wdxh'),
					icon: this.$config.staticUrl + 'dz.png',
					path: '/pages/client/tuan/wdxh'
				}, {
					text: this.$t('pages/client/tuan/zjgk'),
					icon: this.$config.staticUrl + 'gk.png',
					path: '/pages/client/tuan/zjgk'
				}, {
					text: this.$t('pages/client/member/service'),
					icon: this.$config.staticUrl + 'kf.png',
					path: '/pages/client/member/service'
				}, {
					text: this.$t('pages/client/sign_in'),
					icon: this.$config.staticUrl + 'qd.png',
					path: '/pages/client/sign_in'
				}, {
					text: this.$t('pages/client/golden_bean_record'),
					icon: this.$config.staticUrl + 'gold2.png',
					path: '/pages/client/golden_bean_record'
				}]
			},
			jumpPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			jumpPage2(index) {
				let arr = [0, 2, 3, 4, 5, 6]
				console.log(arr.indexOf(index));
				if (arr.indexOf(index) > -1) {
					uni.switchTab({
						url: '/pages/client/video'
					})
				}
			},
			// 任务
			taskCompletionStatus() {
				uni.request({
					url: this.configs.webUrl + '/api/task/taskCompletionStatus',
					data: {
						token: uni.getStorageSync('userinfo').token,
						lang: uni.getStorageSync('language')
					},
					success: res => {
						// console.log('taskCompletionStatus', res);
						if (res.data.code == 1) {
							this.taskList = res.data.data
							this.taskList.forEach(item => {
								if (item.value) {
									if (item.status > item.value) {
										this.$set(item, 'status', item.value)
									}
									this.$set(item, 'value', Number(item.value))
								}
							})
						}
					}
				});
			},
			// 金币余额
			getUserCoinAmount() {
				uni.request({
					url: this.configs.webUrl + '/api/user_coin/getUserCoinAmount',
					data: {
						token: uni.getStorageSync('userinfo').token,
						lang: uni.getStorageSync('language')
					},
					success: res => {
						// console.log('getUserCoinAmount', res);
						this.wallet[0].value = res.data.data.forever_coin
						this.wallet[1].value = res.data.data.coin_amount
						this.wallet[2].value = res.data.data.coupon
						this.wallet[3].value = res.data.data.money
						this.singer_banner = res.data.data.singer_banner
					},
				});
			},
			sigininFn() {
				this.getUserCoinAmount()
			},
			cksigin() {
				let data = {};
				if (uni.getStorageSync("userinfo")) {
					data.uid = uni.getStorageSync("userinfo").id;
				}
				
				data.lang = uni.getStorageSync('language')
				uni.request({
					url: this.configs.webUrl + '/api/video/zuiju',
					data: data,
					success: data => {
						this.sign_list = data.data.getweek
						this.qdjl = data.data.qdjl
						this.tdsy = data.data.tdsy
					},
				});
				uni.request({
					url: this.configs.webUrl + '/api/user/getSingContinuousDays',
					success: res => {
						// console.log(res);
						this.sign_rule = res.data.data.sign_rule
					}
				});
			},
			opset() {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			},
			opsets() {
				uni.navigateTo({
					url: '/pages/set/grzl/grzl'
				})
			},
			ongrzlTap() {
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				data.lang = uni.getStorageSync('language')
				uni.request({
					url: this.configs.webUrl + '/api/user/index',
					data: data,
					success: res => {
						if (res.data.code == 1) {
							this.isLogin = true
							let ionfo = res.data.data
							ionfo.isLogin = true
							this.userinfo = ionfo
							this.iskq = this.userinfo.config.iskq
							uni.setStorage({ //缓存配置信息
								key: 'userinfo',
								data: res.data.data
							})
							if (res.data.data.avatar) {
								var str = res.data.data.avatar;
								if (str.indexOf("data:image") != -1) {
									this.avatar = '';
								} else {
									if (str.indexOf("http") != -1) {
										this.avatar = res.data.data.avatar;
									} else {
										this.avatar = this.configs.imgUrl + res.data.data.avatar;
									}
								}
							} else {
								this.avatar = '';
							}
							uni.setStorage({ //缓存配置信息
								key: 'avatar',
								data: this.avatar
							})
						} else {
							this.isLogin = false

							uni.showToast({
								title: res.data.msg,
								icon: "none"
							});
						}
					},
				});
			},
			getList() {
				let data = {};
				var limit = 15;
				data.limit = limit
				data.ishot = 2
				data.lang =  uni.getStorageSync('language')
				uni.request({
					url: this.configs.webUrl + '/api/video/lists',
					data: data,
					success: data => {
						uni.setStorage({ //缓存配置信息
							key: 'config',
							data: data.data.config
						})
						if (uni.getStorageSync("config").iskq) {
							this.iskq = uni.getStorageSync("config").iskq;
						}
					},
					fail: (data, code) => {}
				});
			},
			showLoginAct() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-user {
		width: 100%;
		justify-content: space-between;

		.ml15 {
			width: calc(100% - 160rpx - 274rpx);
			margin: 0;
		}

		.member {
			width: 234rpx;
			height: 120rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		margin: 20rpx 0;
		background: #fff;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.money {
		.line {
			display: flex;
			flex-wrap: wrap;
			text-align: center;

			image {
				width: 96rpx;
				height: 96rpx;
				margin: 0 auto;
			}

			.num {
				width: 100%;
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #47464C;
			}

			.text {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #47464C;
			}
		}

		.me {
			border-right: 1px solid #DBDBDB;

			.text {
				color: #E03A1C;
			}
		}
	}

	.red-packet {
		width: 100%;
		margin: 20rpx 0;
		border-radius: 20rpx;
		height: 516rpx;
	}

	.task {
		display: block;

		.title {
			width: 100%;
			padding-bottom: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #F85A55;
			border-bottom: 1px dashed #F85A55;
		}

		.line {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F0F0F0;
			margin: 10rpx 0;
			padding: 10rpx 0;

			.left {
				width: calc(100% - 200rpx);

				.top {
					display: flex;
					justify-content: flex-start;

					.title {
						border: 0;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #333333;
						width: auto;
						width: 60%;
					}

					.num {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FB9D2F;
						margin-left: 20rpx;
					}
				}

				.desc {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #AF97A1;
					margin-top: 10rpx;

					.progress-bar {
						background: #EADAD8;
						height: 16rpx;
						width: 240rpx;
						border-radius: 54rpx;

						.border {
							border-radius: 54rpx;
							background: #F75581;
							height: 16rpx;
						}
					}

					span {
						color: #F75581;
					}
				}
			}

			.button {
				width: 184rpx;
				height: 64rpx;
				margin: 0;
			}

			.hui {
				color: #AAAAAA;
				background: #EAEAEA;
			}
		}
	}

	.bottom {
		flex-wrap: wrap;
		justify-content: space-between;

		.line {
			width: 33%;
			text-align: center;
			margin-bottom: 20rpx;

			image {
				width: 88rpx;
				height: 88rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>
<style>
	.fenl .item,
	.fenl i {
		width: 30%;
	}

	.fenl .item .box {}

	.opsetads {
		color: #000000;
		width: 36rpx;
		height: 36rpx;
		text-align: center;
		border-radius: 100%;
		animation: rotate 10s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg) skew(0deg) scale(1);
			-ms-transform: rotate(0deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(0deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(0deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(0deg) skew(0deg) scale(1);
		}

		100% {
			transform: rotate(360deg) skew(0deg) scale(1);
			-ms-transform: rotate(360deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(360deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(360deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(360deg) skew(0deg) scale(1);
		}
	}

	.member-face {
		position: relative;
	}

	.member-face .vip-level {
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -30rpx;
	}

	.member-face .face {
		width: 140rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 100rpx;
	}

	.miniapp-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #F2F2F2;
	}

	.button {
		width: 100%;
		height: 76rpx;
		margin-top: 60rpx;
		background: #F75581;
		border-radius: 54rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>